<template>
  <f7-page>
    <f7-navbar back-link=" " class="no-hairline"></f7-navbar>
    <div class="content-padding login-register-content">
      <h1>{{$t('m.lwpc1')}}</h1>
      <div class="select-accounts-box">
        <div style="position: relative">
          <custom-input type="tel" v-model="loginFormItems.phone" :placeholder="$t('m.login2')" @focus="handlePhoneFocus" @blur="handlePhoneBlur"></custom-input>
          <!--<my-select :show.sync="showDropDown" @select="handleDropDownSelect">
            <my-select-item v-for="(phone, index) in historyPhones" :key="index">{{phone}}</my-select-item>
          </my-select>-->
        </div>

        <custom-input v-model="loginFormItems.code" :placeholder="$t('m.fp3')" button :send-status="smsStatus" @send-sms="handleSendSms"></custom-input>
      </div>

      <div class="buttons-box">
        <f7-button fill color="blue" large @click="handleLogin">{{$t('m.login1')}}</f7-button>
      </div>
    </div>
  </f7-page>
</template>

<script>
  import MySelect from '../ajComponents/smartSelect';
  import MySelectItem from '../ajComponents/smartSelect/item';
  import {sendPhoneCode} from "../api";
  import {getPhones} from "../utils/savePhone";

  export default {
    name: "phone-code-login",
    data () {
      return {
        showDropDown: false,
        loginFormItems: {
          phone: '',
          code: '',
          type: 2
        },
        smsStatus: false
      }
    },
    computed: {
      historyPhones() {
        return getPhones();
      }
    },
    methods: {
      handlePhoneFocus() {
        console.log(111)
        this.showDropDown = true;
      },
      handlePhoneBlur() {
        setTimeout(() => {
          this.showDropDown = false;
        })
      },
      handleDropDownSelect (value) {
        this.loginFormItems.phone = value;
      },
      handleSendSms() {
        sendPhoneCode({ phone: this.loginFormItems.phone, type: 2}).then(() => {
          this.smsStatus = true;
        })
      },
      handleLogin () {
        this.$preloader.open(this.$t('m.login7'));
        this.$store.dispatch('Login', this.loginFormItems).then(() => {
          this.$preloader.close();
          this.$store.dispatch('GetInfo');
          this.$store.dispatch('GetConfig');
          this.$store.dispatch('GetCurrencyInfo');
          this.$store.dispatch('saveHistoryPhone', this.loginFormItems.login_phone);
          this.$toast(this.$t('m.login8'));
        }).catch(() => {
          this.$preloader.close();
        });
      }
    },
    components: {
      MySelect,
      MySelectItem
    }
  }
</script>

<style scoped>

</style>
